<template>
	<view class="pages">
		<!--
		<image class="bg" :src="getimg('/uploads/dailibg2.png')" mode="widthFix"></image>
		-->
		<view :style="'height:'+head+'px'"></view>
		<view style="height: 88rpx;"></view>
		
		
		
		<view class="tops">
			<view class="user" v-if="info.u">
				<image class="avatar" :src="getimg(info.u.avatar)"></image>
				<view class="fr">
					<text class="nickname">{{info.u.nickname}}</text>
					<text class="infos" style="margin-left: 20rpx;">{{getsf(info.u.group_id)}}</text>
				</view>
				
			</view>
			
			<view class="lists fr">
				<view class="dan" v-for="d of datas">
					<text class="val">{{d.val}}</text>
						<text class="name">{{d.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="gongneng fr">
			<view class="gd btn" v-for="d of menu"  @click="openwin(d.path)">
				<image class="icon" :src="d.icon"></image>
				<text class="gdname">{{d.name}}</text>
			</view>
		</view>
		
		<!--数据-->
		<view class="datas">
			<view class="change_left flex">
			<view class="left" 
			:style="'background:'+(index==1?'linear-gradient(to bottom right, #ffcfe5, #b7e5ff)':'#efefef')"
			@click="index = 1"
			>
				<text class="change_t1">团队</text>
			</view>
			
			<view class="right left"
			:style="'background:'+(index==2?'linear-gradient(to bottom right, #ffcfe5, #b7e5ff)':'#efefef')"
			@click="index = 2"
			>
			<text class="change_t1">业绩</text>
			</view>
			</view>

			<view class="kuai" v-if="index == 1 && info.urr">
				<text class="title1">总人数：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.urr.all}}</text>
						<text class="info1">总人数</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.urr.jadd}}</text>
						<text class="info1">今日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.urr.zadd}}</text>
						<text class="info1">昨日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.urr.yadd}}</text>
						<text class="info1">本月新增</text>
					</view>
				</view>
				<text class="title1" v-if="t > 1">门店数：</text>
				<view class="fr" style="justify-content: space-between;" v-if="t > 1">
				<view class="dank">
					<text class="val1">{{info.mdarr.all}}</text>
					<text class="info1">总门店</text>
				</view>
				
					<view class="dank">
						<text class="val1">{{info.mdarr.jadd}}</text>
						<text class="info1">今日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdarr.zadd}}</text>
						<text class="info1">昨日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdarr.yadd}}</text>
						<text class="info1">本月新增</text>
					</view>
				</view>
			</view>
			
			
			
			<view class="kuai" v-if="index == 2 && t>1">
				<text class="title1">门店销量：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.mdsale.all?info.mdsale.all:0}}</text>
						<text class="info1">总金额</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdsale.jin?info.mdsale.jin:0}}</text>
						<text class="info1">今日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdsale.zuo?info.mdsale.zuo:0}}</text>
						<text class="info1">昨日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdsale.yue?info.mdsale.yue:0}}</text>
						<text class="info1">本月销售</text>
					</view>
				</view>
				<text class="title1">竞购销量：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.all:0}}</text>
						<text class="info1">总金额</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.jin:0}}</text>
						<text class="info1">今日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.zuo:0}}</text>
						<text class="info1">昨日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.yue:0}}</text>
						<text class="info1">本月销售</text>
					</view>
				</view>
				
				<text class="title1">霸王餐销售：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.all:0}}</text>
						<text class="info1">总金额</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.jin:0}}</text>
						<text class="info1">今日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.zuo:0}}</text>
						<text class="info1">昨日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.yue:0}}</text>
						<text class="info1">本月销售</text>
					</view>
				</view>
				
				
			</view>

		</view>
		
		<!--图表-->
		<view class="tbcon">
			<view class="fr" style="justify-content: space-between;padding: 20rpx;">
				<view class="fr">
					<uni-icons type="fire-filled" size="30" color="red"></uni-icons>
					<text class="title2">销售</text>
				</view>
				<view class="fr">
					<text :class="'danxuan'+(type == 1?' danxuans':'')" @click="cw(1)">日数据</text>
					<text :class="'danxuan'+(type == 2?' danxuans':'')" @click="cw(2)">月数据</text>
					<text :class="'danxuan'+(type == 3?' danxuans':'')" @click="cw(3)">年数据</text>
				</view>
			</view>
		<view class="charts-box">
		  <qiun-data-charts 
		    type="line"
		    :opts="opts"
		    :chartData="chartData"
					  :ontouch="true"
		  />
		</view>
		</view>
		
		<!--排名-->
		<view class="uni-container" style="background: #ffffff;">
			<view class="fr" style="justify-content: space-between;padding: 20rpx;">
				<view class="fr">
					<uni-icons type="vip-filled" size="30" color="red"></uni-icons>
					<text class="title2">月排行榜</text>
				</view>
				<view class="fr">
					<text :class="'danxuan'+(type1 == 1?' danxuans':'')" @click="cw1(1)">门店</text>
					<text :class="'danxuan'+(type1 == 2?' danxuans':'')" @click="cw1(2)">竞购</text>
					<text :class="'danxuan'+(type1 == 3?' danxuans':'')" @click="cw1(3)">霸王餐</text>
					<text :class="'danxuan'+(type1 == 4?' danxuans':'')" @click="cw1(4)">霸王同城</text>
				</view>
			</view>
			
					<uni-table ref="table" stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="248rpx" align="center">昵称</uni-th>
							<uni-th width="248rpx" align="center">销售额</uni-th>
							<uni-th width="248rpx" align="center">排名</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td align="center">{{ item.name }}</uni-td>
							<uni-td align="center">{{ item.sale }}</uni-td>
							<uni-td align="center">{{ item.paiming }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				
		

		<view class="top">
			<view :style="'height:'+head+'px'"></view>
			<view class="topn fr">
				<uni-icons @click="back" type="back" size="30" style="margin-left:10rpx;" color="#ffffff"></uni-icons>
				<text class="title">分销中心</text>
				<view style="width: 35px;"></view>
			</view>
		</view>
		
	</view>
</template>

<script>
import $util from '@/util/util'
	export default {
		data() {
			return {
				head:getApp().globalData.head,
				money:0,
				datas:[],
				menu:[
					{name:'我的推广码',icon:'../static/code.png',path:'/pages/memberinfo/daili/ecode'},
					{name:'补贴中心',icon:'../static/zhuanqian.png',path:'/pages/memberinfo/carlist/carlist?type=3'}
				],
				list:[],
				info:{},

				index:1,//当前是看团队还是销售
				
				t:1,//身份
				bwsale:{},
				jgsale:{},
				mdsale:{},
				
				chartData: {},
				opts: {
				        color: ["#cb3426","#181bff","#faa721","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [15,10,0,15],
				        enableScroll: true,
				        legend: {},
				        xAxis: {
				          disableGrid: true,
						  scrollShow: true,
						  itemCount: 5
				        },
				        yAxis: {
				          gridType: "dash",
				          dashLength: 2
				        },
				        extra: {
				          line: {
				            type: "curve",
				            width: 2,
				            activeType: "hollow"
				          }
				        }
				      },
				type:1,
				type1:1,
				tableData:[]
			}
		},
		created() {
			this.getinfo()
			//this.get_list();
			this.getServerData();
			this.cw1()
		},
		onReachBottom() {
			// #ifndef APP
			this.loadmore()
			// #endif
		},
		methods: {
			getsf(t){
				if(t == 1){
					return '普通用户';
				}else if(t == 2){
					return '门店';
				}else if(t == 3){
					return '合伙人';
				}else if(t == 4){
					return '子公司';
				}else if(t == 5){
					return '运营中心';
				}else if(t == 6){
					return '总公司';
				}
				return '普通用户';
			},
			openzhuye(uid){
				$util.openwin('/pages/member/myindex/myindex?touserid='+uid)
			},
			openwin(path){
				if(path == '')return
				
				if(path == 'tixian'){
					this.tixian()
					return
				}
				
				$util.openwin(path)
			},
			changes(i){
				this.s = i;
				this.get_list();
			},
			loadmore(){
			if(this.haveMore && !this.loading){
			console.log('开始触发分页')	
			this.get_list(true);
			}	
			},
			get_list(loading = false){
			let that =this;
			that.loading = true;
			if(!loading){
			that.page = 1;
			that.shoplist = []
			that.haveMore = true
			}
			//$util.showProgress();
			$util.ajax({
			url:'Member/dailiList',
			page:that.page,
			},(res,err)=>{
			//$util.hideProgress();
			console.log(res)
			that.loading = false;
			if(res.code == 1 && res.data.length > 0){
			if(that.page == 1){
			that.shoplist = res.data;
			}else{
			that.shoplist = that.shoplist.concat(res.data)
			}	
			}else{
			that.haveMore = false;
			}
			that.page += 1;
			})	
			},
			getimg(path){
				return $util.get_img(path)
			},
			back(){
				uni.navigateBack()
			},
			getinfo(){
				$util.showProgress()
				$util.ajax({
					url:'Member/ajaxdaili'
				},(r,e)=>{
					$util.hideProgress()
					if(r.code == 1){
						this.info = r.data
						this.datas = r.data.datas
						this.money = r.data.money
						this.t = r.data.u.group_id
					}
				})
			},
			cw(t){
				this.type = t
				this.getServerData()
			},
			cw1(t = 1){
				this.type1 = t
				this.paixu()
			},
			paixu(){
			$util.ajax({
				url:'Member/paihang',
				type:this.type1
			},(r)=>{
				if(r.code == 1){
					this.tableData = r.data
				}
			})	
			},
			getServerData() {
				$util.showProgress()
				$util.ajax({
					url:'Member/fenxi',
					type:this.type
				},(r)=>{
					$util.hideProgress()
					if(r.code == 1){
						//遍历数组
						let categories = r.data.h;
						let data = r.data.t;
						let data1 = r.data.t1;
						let data2 = r.data.t2;
						let data3 = r.data.t3;
						/* for (var i = 0; i < r.data.arr.length; i++) {
							let n = r.data.arr[i].price;
							//n = n+Math.floor(Math.random() * (1000 - 950 + 1)) + 950;
							data.push(n)
							data1.push(r.data.arr[i].num)
							categories.push(r.data.arr[i].time)
						} */
						//setTimeout(() => {
						  //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
						  let res = {
						      categories: categories,
						      series: [
						        {
						          name: "门店",
						          data: data
						        },
								{
								  name: "竞购",
								  data: data1
								},
								{
								  name: "霸王餐",
								  data: data2
								},{
								  name: "霸王同城",
								  data: data3
								},
						      ]
						    };
						  this.chartData = JSON.parse(JSON.stringify(res));
						//}, 500);
					}
				})
			
			    },
		}
	}
</script>

<style scoped>
.tops{
	padding: 20rpx;
	background: #F11E1E;
}
.user{
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	flex-direction: column;
}
.avatar{
	width: 120rpx;
	height: 120rpx;
	border-radius: 120rpx;
	margin-bottom: 20rpx;
}

.nickname{
	font-size: 28rpx;
	font-weight: bold;
	color: #ffffff;
}
.lists{
	display: flex;
	justify-content: space-around;
	margin-top:40rpx;
}
.dan{
	display: flex;
	align-items: center;
	flex-direction: column;
}
.val{
	font-size: 28rpx;
	font-weight: bold;
	color:#ffffff;
}
.name{
	font-size: 28rpx;
	color: #efefef;
}
.gongneng{
	background: #ffffff;
	padding: 20rpx;
	margin-top: 10rpx;
	display: flex;
	justify-content: space-between;
}
.gd{
	display: flex;
	width: 345rpx;
	align-items: center;
	flex-direction: column;
}
.icon{
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 10rpx;
}
.gdname{
	font-size: 28rpx;
	color: #585858;
}
.bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 750rpx;
}

.top{
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	background: #F11E1E;
}
.topn{
	display: flex;
	height: 88rpx;
	justify-content: space-between;
}
.title{
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
}


  .change_left{
	  display: flex;
	flex-direction: row;
	align-items: center;
  }
  .left{
  	    background: linear-gradient(to bottom right, #ffb6d7, #8bd6ff);
  	    padding: 5px 20px;
  	    border-radius: 20px 0px 0px 20px;
  }
  .change_t{
  	font-size: 14px;
  	color: #585858;
  }
  .change_t1{
  	font-size: 14px;
  	color: #585858;
	width: 100rpx;
  }
  .right{
  	border-radius: 0px 20px 20px 0px;
  	background: #efefef;
  }

.datas{
	background: #ffffff;
	padding: 20rpx;
	margin-top: 20rpx;
}
.kuai{
	margin-top: 20rpx;
}
.title1{
	font-size: 28rpx;
	color: #ababab;
}
.dank{
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20rpx;
}
.val1{
	font-size: 30rpx;
	color: #000;
}
.info1{
	font-size: 28rpx;
	color: #353535;
}

.infos{
	font-size: 26rpx;
	color: #ffffff;
	background:linear-gradient(to right, #9cbbe9, #70d4eb);
	padding: 0rpx 10rpx;
	border-radius: 40rpx;
}
.charts-box{
	margin-top: 40rpx;
	width: 750rpx;
	background: #ffffff;
}
.tbcon{
	background: #ffffff;
	margin-top: 20rpx;
}
.title2{
	font-size: 30rpx;
	font-weight: bold;
}
.danxuan{
	font-size: 28rpx;
	color: #585858;
	background: #e8e8e8;
	margin-left: 20rpx;
	padding: 5rpx 20rpx;
	border-radius: 50rpx;
}
.danxuans{
	color: #ffffff;
	background: red;
}
</style>
